<template>
  <el-card class="box-card">
    <template #header>
      <h3 class="users-title">
        {{ $route.query.id ? '修改用户' : '新增用户' }}
      </h3>
    </template>
    <el-form
      class="user-add-form"
      ref="ruleUser"
      :rules="rules"
      :model="user"
      label-width="80px"
    >
      <el-form-item label="用户名称" prop="username">
        <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="user.nickname" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input
          v-model="user.password"
          placeholder="请输入密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="rePassword">
        <el-input
          v-model="user.rePassword"
          placeholder="确认密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="submitUserForm('ruleUser')"
          >确认</el-button
        >
        <el-button @click="resetUserForm('ruleUser')">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'UserAdd',
  data() {
    return {
      user: {
        username: '',
        nickname: '',
        password: '',
        rePassword: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 10, message: '长度为5到10位', trigger: 'blur' },
          {
            pattern: /^[0-9A-Za-z]{5,10}$/,
            message: '长度为5到10位的字母和数字',
            trigger: 'blur',
          },
        ],
        nickname: {
          required: true,
          validator: this.nicknameVerify,
          trigger: 'blur',
        },
        password: {
          required: true,
          message: '密码不能为空',
          trigger: 'blur',
        },
        rePassword: {
          required: true,
          validator: this.rePasswordVerify,
          trigger: 'blur',
        },
      },
    }
  },
  mounted() {
    if (this.$route.query.id) {
      const { username, nickname } = this.$route.query
      this.user = {
        username,
        nickname,
      }
    }
  },
  methods: {
    ...mapActions('users', ['addUser', 'updateUser']),
    nicknameVerify(rules, value, callback) {
      if (!/^[0-9A-Za-z]{5,10}$/.test(value)) {
        callback('长度为5到10位的字母和数字')
        return
      }
      callback()
    },
    rePasswordVerify(rules, value, callback) {
      if (this.user.password !== value) {
        callback('密码不一致')
        return
      }
      callback()
    },
    submitUserForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let message
          if (!this.$route.query.id) {
            await this.addUser(this.user)
            message = '添加成功'
          } else {
            await this.updateUser({
              id: this.$route.query.id,
              ...this.user,
            })
            message = '修改成功'
          }
          this.$message({
            type: 'success',
            message,
          })
          this.$router.history.push('/user')
        } else {
          this.$message({
            type: 'error',
            message: '请填写正确信息',
          })
        }
      })
    },
    resetUserForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style>
.user-add-form {
  width: 400px;
}
</style>
